<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
 条件渲染 在容器中通过对值判断来决定标签或内容是否应该显示
 结果为true或false
  v-if="表达式"
  v-else-if="表达式"
  v-else
  特点：当不显示的时候 直接移除元素 适合切换不频繁的场景



  v-show="表达式" 结果为true或false
  特点：当不显示的时候通过display来隐藏元素 适合切换频繁的常见


-->
<div id="app">
{{name}}
    <h4>当前n值是：{{n}}</h4>
    <button @click="n++">点我改变n的值</button>

    <h2 v-if="n === 1">n值是1</h2>
    <h2 v-else-if="n === 2">n值是2</h2>
    <h2 v-else-if="n === 3">n值是3</h2>
    <h2 v-else>n值为其他</h2>


    <hr>
    <h2 v-show="n === 1">show n值是1</h2>
    <h2 v-show="n === 2">show n值是2</h2>

    <hr>
    <!--通过一个变量来控制多个标签的显示和隐藏-->
    <!--1.使用父标签包起来-->
    <div v-show="n === 1">
    <h2>你好</h2>
    <h2>北京</h2>
    <h2>xxxxx</h2>
    </div>

    <!--2.使用模版标签 只能搭配v-if-->
    <template v-if="n === 1">
        <h2>你好</h2>
        <h2>北京</h2>
        <h2>xxxxx</h2>
    </template>

</div>

<script>
    new Vue({
        el:'#app',
        data(){
            return{
                name:'张三',
                n:0
            }
        },

    });

</script>

</body>
</html>